<template>
	<view>
		<view class="" v-if="infoList.length">
			<view class="" style="display: flex; justify-content: center; align-items: center;">

				<image :src="infolink" mode="" @click="save" style="margin-top: 30rpx; margin-bottom: 30rpx;"></image>
				<!-- <text @click="mycopy" >复制链接到浏览器下载商学院app</text>
				<br>
				<a :href='infolink'>{{infolink}}</a> -->
				<!-- <button type="default">https://wwa.lanzous.com/i93jpozncsh</button> -->
			</view>
			<!-- <view class=""> -->
			<view class="mytit">
				<view class=" " style="margin-right:50rpx;">
					用户列表({{infoList.length}}个)
				</view>
				<view @click="open" :data-id="'center'" class="mybtn1" style="flex: 1;">
					申请账号
				</view>

			</view>

			<view class="" v-for="(item,index) in infoList" class="mylist">
				<view>
					<text style="font-size: 16px;">用户{{index + 1}}</text>

				</view>
				<view>
					<text>账号：</text>
					<text>{{item.user_name}}</text>
				</view>
				<view class="">
					<text>密码：</text>
					<text>{{item.user_password}}</text>
				</view>
				<view class="">
					<text>电话：</text>
					<text>{{item.user_tel}}</text>
				</view>

			</view>
			<!-- <view class="mylogo">
				<image src="../../../static/images/distribution/shop_edit.png" mode=""></image>
			</view> -->
			<!-- 页面中 -->
			<view class="mycontont">
				<pop ref="pop" :direction="direction" :is_close="true" :is_mask="true" :width="90">
					<!-- 页面内容 -->
					<input type="text" value="" placeholder="请输入员工姓名" class="btnn" v-model="number" />
					</br>
					<input type="text" value="" placeholder="请输入注册APP时手机号" class="btnn" v-model="tel" maxlength="11"  />
					</br>
					<view style="display: flex; justify-content: space-between;padding-right: 20rpx;" class="btnn">
						<input :type="typePwd" value="" placeholder="请输入密码" v-model="passwd" class="passwd" />
						<image src="../../../static/images/eye.png" mode="" class="myeye" @click="myeye()"></image>
					</view>
					<button type="primary" style="margin-top: 30rpx;" @click="myzhuce()">注册</button>
				</pop>
			</view>
		</view>
		<!-- 首次打开直接注册 -->
		<view class="zhuce" v-else="infoList.length">

			<input type="text" value="" placeholder="请输入员工姓名" class="btnn" v-model="number" />
			</br>
			<input type="text" value="" placeholder="请输入注册APP时手机号" class="btnn" v-model="tel" maxlength="11" />
			</br>
			<view style="display: flex; justify-content: space-between;padding-right: 20rpx; " class="btnn">
				<input :type="typePwd" value="" placeholder="请输入密码" v-model="passwd" class="passwd" />
				<image src="../../../static/images/eye.png" mode="" class="myeye" @click="myeye()"></image>
			</view>
			<button type="primary" style="margin-top: 30rpx;" @click="myzhuce()">注册</button>
		</view>

		<!-- 弹出申请账号窗口 -->
		<view class="mycontont" v-if="display" @click="myzhuce">
			<view @click="open" :data-id="'center'" class="mybtn">
				申请账号
			</view>
			<pop ref="pop" :direction="direction" :is_close="true" :is_mask="true" :width="90">
				<!-- 页面内容 -->
				<view v-for="t in 5" :key="t" style="height: 180rpx;">
					页面内容：
					我是：{{direction}}一个弹窗
				</view>
			</pop>
		</view>




	</view>
</template>

<script>
	import http from 'common/js/http.js';
	import pop from "@/components/ming-pop/ming-pop.vue"
	export default {
		data() {
			return {
				direction: "up",
				//不显示
				display: false,
				typePwd: 'password',
				tel: '',
				number: '',
				passwd: '',
				infoList: '',
				infolink: '',

			}
		},
		created() {
			this.getlist()
		},
		mixins: [http],
		methods: {
			save() {
				console.log('预览');
				var paths = [];
				paths.push(this.$util.img(this.infolink));
				uni.previewImage({
					urls: paths,
				});
			},
			mycopy() {
				console.log('复制', this.infolink)
				uni.setClipboardData({
					data: this.infolink,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 3000
						})
					}

				})
			},
			getlist() {
				// System.Login.usersList
				this.sendRequest({
					url: 'System.Login.usersList',
					data: {},
					success: res => {
						console.log('返回的列表res', res)
						this.infolink = res.data.link.link
						this.infoList = res.data.userinfo

					}
				});
			},
			open(e) {
				this.direction = e.currentTarget.dataset.id;
				//打开弹窗
				this.$refs.pop.show();
			},

			myzhuce() {
				// var reg = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则
				// var phoneNum = this.tel;//手机号码
				// var  flag = reg.test(phoneNum)
				if (this.number.length == 0) {
					uni.showToast({
						title: '账号不能为空',
						icon: 'success',
						duration: 3000,
					})
				} else if (this.tel.length == 0) {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'success',
						duration: 3000,
					})
				}
				// else if(flag ==false){
				// 	uni.showToast({
				// 		title: '手机号规则不正确',
				// 		icon: 'success',
				// 		duration: 3000,
				// 	})
				// }
				else if (this.passwd.length == 0) {
					uni.showToast({
						title: '密码不能为空',
						icon: 'success',
						duration: 3000,
					})
				} else {
					this.sendRequest({
						url: 'System.Login.usersRegister',
						data: {
							tel: this.tel,
							username: this.number,
							password: this.passwd
						},
						success: res => {
							console.log('返回的值',res)
							// console.log('返回的值', JSON.parse(res))
							// 当返回的值res=0，提示该账号已被注册
							if (res == 1) {
								uni.showModal({
									title: '提示',
									content: '该账号已被注册',
									cancelText: "取消", // 取消按钮的文字  
									confirmText: "确认", // 确认按钮文字  
									showCancel: true, // 是否显示取消按钮，默认为 true
									confirmColor: '#f55850',
									cancelColor: '#39B54A',
									success: (res) => {
										if (res.confirm) {
											uni.redirectTo({
												url: '/pages/member/mylogon/mylogon'
											})
										} else {
											console.log('else', res)
										}
									}
								})
							}
							else if(res.code==-1){
								uni.showToast({
									title: res.message,
									icon:'none',
									duration:3000
								})
							}
							 else {
								if(res==2){
									console.log('res',res)
									uni.showModal({
										title: '提示',
										content: '注册成功',
										cancelText: "取消", // 取消按钮的文字  
										confirmText: "确认", // 确认按钮文字  
										showCancel: true, // 是否显示取消按钮，默认为 true
										confirmColor: '#f55850',
										cancelColor: '#39B54A',
										success: (res) => {
											if (res.confirm) {
												uni.redirectTo({
													url: '/pages/member/mylogon/mylogon'
												})
											} else {
												console.log('else', res)
											}
										}
									})
									
								}
								
								
							}
						},
						
					});
				}

			},
			myeye() {
				// 点击时,如果typePwd为password,则改变为text显示密码
				this.typePwd = this.typePwd === 'password' ? 'text' : 'password';
				console.log('触发')
			}

		},
		components: {
			pop
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
		padding-top: 20rpx;
	}

	.mytit {
		display: flex;
		justify-content: start;
		width: 660rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.mylist {
		width: 660rpx;
		margin: 0 auto;
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 25rpx;
		padding: 20rpx;
	}

	.passwd {
		margin: auto 0;
		border: none;
		outline-color: invert;
		outline-style: none;
		outline-width: 0px;
		border: none;
		border-style: none;
		text-shadow: none;
		-webkit-appearance: none;
		-webkit-user-select: text;
		outline-color: transparent;
		box-shadow: none;
		font-size: 16px;
	}

	.myeye {
		width: 20px;
		height: 20px;
		margin: auto 0;
	}

	.btnn {
		border-radius: 50rpx;
		border: 2rpx solid #E4E4E4;
		height: 80rpx;
		padding-left: 20rpx;
		background-color: #fff;
	}

	.zhuce {
		padding: 100rpx 80rpx 0;
	}

	// f0f0f0


	.mybtn {
		text-align: center;
		margin: 20px;
		background-color: #007AFF;
		color: #FFFFFF;
		border-radius: 3px;
		padding: 10px 0;
	}

	.mybtn1 {
		text-align: center;
		background-color: #007AFF;
		color: #FFFFFF;
		border-radius: 3px;

	}
</style>
